<template>
<div>
    <div class="Tools">
        <!-- 图层筛选 -->
        <div class="popover-right-start">
            <el-popover placement="right-start" trigger="manual" v-model="visible">
                <!-- 嵌套多选框 -->
                <slot>
                    <el-tree :key="defaultKeys" :data="data" show-checkbox node-key="id" :props="defaultProps" :default-expand-all="true" ref="default-checked-keys" :default-checked-keys="defaultCheckedTaskKeys" :expand-on-click-node="false" :check-on-click-node="true" icon-class="none_icon" @check="getClickValue">
                        <span class="custom-tree-node" slot-scope="{ node,data }">
                            <span :style="{background:data.color,color:'#fff',padding:'3px 5px',margin:'8px 0'}">{{ node.label }}</span>
                        </span>
                    </el-tree>
                </slot>
                <span title="地块搜索" slot="reference" class="btn" @click="openPlot"><i class="el-icon-menu"></i></span>

            </el-popover>
        </div>
        <!-- 放大 -->
        <!-- <div>
                <span @click="addZoom" class="btn" title="放大地图"><i class="el-icon-plus"></i></span>
            </div> -->
        <!-- 缩小 -->
        <!-- <div>
                <span @click="delZoom" class="btn" title="缩小地图"><i class="el-icon-minus"></i></span>
            </div> -->
        <!-- 移动到中心 -->
        <!-- <div>
                <span @click="returnCenter" class="btn" title="定位到中心"><i class="el-icon-position"></i></span>
            </div> -->
        <!-- 图斑多选 -->
        <!-- <div>
                <span class="placeholderBtn"></span>
                <span class="placeholderBtn"></span>
            </div> -->
        <!-- 切换地图 -->
        <!-- <div class="changeMap">
                <el-popover placement="right-start" trigger="hover">
                    <span slot="reference" class="btn">
                        <i class="el-icon-coordinate"></i>
                    </span>
                    <slot>
                        <div class="changeMap">
                            <div v-for="(item, index) in typeTool" :key="index" @click="changeMap(item)" class="toggleTool" :style="layerId===item.id?active:''">
                                <img :src="item.imgUrl" />
                                <div>{{ item.title }}</div>
                            </div>
                        </div>
                    </slot>
                </el-popover>
            </div> -->
        <!-- 测距 -->
        <!-- <div>
                <span class="btn" @click="openRanging" :title="openDistance?'关闭测距':'开始测距'"><i :class="operation"></i></span>
            </div> -->
    </div>
</div>
</template>

    
<script>
import {
    mapState
} from 'vuex';
export default {
    name: "Tools",
    props: {
        map: Object,
        center: Array,
    },
    data() {
        return {
            visible: false,
            active: {
                border: "2px solid #ffbb00"
            },
            defaultCheckedFisheryKeys: ['1-2-1', '1-2-2'],
            defaultCheckedPlantKeys: ['1-1-1', '1-1-2', '1-1-3', '1-1-4'],
            defaultCheckedTaskKeys: [],
            defaultKeys: 1,
            openDistance: false,
            operation: "el-icon-discover",
            // 工具栏：地图切换栏
            ismapTypeTool: false,
            typeTool: [{
                    id: "vec_w",
                    imgUrl: require("@/assets/vec.png"),
                    title: "矢量地图",
                },
                {
                    id: "img_w",
                    imgUrl: require("@/assets/img.png"),
                    title: "卫星地图",
                },
                {
                    id: "ter_w",
                    imgUrl: require("@/assets/mix.png"),
                    title: "混合地图",
                },
            ],
            layerId: "img_w",
            data: [{
                color: "#000000",
                createTime: null,
                id: 1,
                landTypeCode: 1,
                landTypeLevel: 1,
                landTypeName: "全选/取消全选",
                landTypeParentCode: 0,
                landTypeParentCodes: null,
                systemType: "",
                systemTypes: null,
                updateTime: null,
                children: [{
                        id: "1-1",
                        label: "耕地",
                        color: "#222222",
                        children: [{
                                id: "1-1-1",
                                label: "其它",
                                color: "#AFD18A"
                            },
                            {
                                id: "1-1-2",
                                label: "水田",
                                color: "#3FA8AD"
                            },
                            {
                                id: "1-1-3",
                                label: "旱地",
                                color: "#333333"
                            },
                            {
                                id: "1-1-4",
                                label: "种植大棚",
                                color: "#79A449"
                            },
                        ],
                    },
                    {
                        id: "1-2",
                        label: "鱼塘",
                        color: "#3A1fff",
                        children: [{
                                id: "1-2-1",
                                label: "鱼塘",
                                color: "#3A3FD2",
                            },
                            {
                                id: "1-2-2",
                                label: "水产越冬棚",
                                color: "#5E3F8B"
                            },
                        ],
                    },
                    {
                        id: "1-3",
                        label: "园地",
                        color: "#FC8452",
                        children: [{
                                id: "1-3-1",
                                label: "果园",
                                color: "#B14356"
                            },
                            {
                                id: "1-3-2",
                                label: "茶园",
                                color: "#C5CB48"
                            },
                        ],
                    },
                ],
            }, ],
            defaultProps: {
                children: "children",
                //label: "label",
                label: 'landTypeName',
                id: 'landTypeCode',
                parentId: 'landTypeParentCode',
                isLeaf: false,
                color: "color",
            },
        };
    },
    created() {
        this.getselectAll()
        this.defaultChecked()
    },
    watch: {
        currentTask() {
            this.defaultChecked()
        }
    },
    computed: {
        ...mapState({
            currentTask: (state) => {
                return state.currentTask.Task.data
            }
        })
    },
    methods: {
        getselectAll() {
            this.$axios.get('/baseinfo/api/v1.0/fishing/landType/selectAll', {
                params: {
                    pageNumber: 1,
                    pageSize: 100
                }
            }).then((res) => {
                if (res.errorCode === '00000') {
                    this.data = res.data.list
                } else {
                    this.$message.warning('数据获取异常')
                }

            })
        },
        openPlot() {
            this.visible = !this.visible
            console.log(this.visible);
        },
        defaultChecked() {
            let SYS_TYPE,
                currentTask
            if (this.currentTask) {
                currentTask = this.currentTask;
                console.log(currentTask.planType)
                if (currentTask) {
                    if (currentTask.planType === 'SS1' || currentTask.planType === 'SS2') {
                        this.defaultCheckedTaskKeys = currentTask.planType === 'SS1' ? this.defaultCheckedFisheryKeys : this.defaultCheckedPlantKeys
                        SYS_TYPE = currentTask.planType
                    } else {
                        if (localStorage.getItem('SYS_TYPE')) {
                            SYS_TYPE = localStorage.getItem('SYS_TYPE');
                        } else {
                            this.$message.error('系统异常，需要退出重新登录')
                            return false
                        }
                    }
                }
            } else {
                if (localStorage.getItem('SYS_TYPE')) {
                    SYS_TYPE = localStorage.getItem('SYS_TYPE');
                } else {
                    this.$message.error('系统异常，需要退出重新登录')
                    return false
                }
            }

            // this.$nextTick(() => {
            //     this.$refs['default-checked-keys'].removeAttribute('default-checked-keys')
            // })

            if (SYS_TYPE === 'SS1') {
                this.defaultCheckedTaskKeys = this.defaultCheckedFisheryKeys
            } else if (SYS_TYPE === 'SS2') {
                this.defaultCheckedTaskKeys = this.defaultCheckedPlantKeys
            }
            this.defaultKeys = Math.random()

        },
        openRanging() {
            this.$store.commit('Map/openRanging');
            this.openDistance = this.$store.state.Map.openDistance
            console.log(this.$store.state.Map.openDistance)
            if (this.$store.state.Map.openDistance) {
                this.operation = 'el-icon-close'
            } else {
                this.operation = 'el-icon-discover'
                this.$parent.$refs['distance'].innerHTML = '';
                this.$parent.geojson.features = []
                console.log(this.$parent.geojson.features)
            }
        },
        addZoom() {
            this.map.zoomIn();
        },
        delZoom() {
            this.map.zoomOut();
        },
        returnCenter() {
            this.map.panTo(this.center);
        },
        // //切换地图
        changeMap(item) {
            console.log(item.id);
            console.log(this.map.getLayer(this.layerId))
            // this.$emit('on-setLayer',item.id)
            // 有三层Layer, 将点击的Layer移至顶层;
            if (this.map.getLayer(this.layerId).id != item.id) {
                this.map.moveLayer(item.id);
                this.map.moveLayer('deep-bg');
                this.map.moveLayer('nanhai');
                this.map.moveLayer('experimentalData-line-layer');
                this.map.moveLayer('experimentalData-area-layer');
                this.layerId = item.id;
            }
            this.ismapTypeTool = false;

        },
        getClickValue(cur, all) {
            console.log(cur)
            //二级地类
            let levelValue = [];
            all.checkedNodes.forEach((item) => {
                console.log(item);
                if (item.landTypeLevel >= 2) {
                    levelValue.push(item.landTypeName);
                }
            });
            console.log(levelValue);
            this.$emit("sendSetLevel", levelValue);
        },
    },
};
</script>

    
<style lang="scss">
.Tools {
    position: absolute;
    z-index: 100;
    bottom: 275px;
    right: 16px;
    transform: translateY(0%);
    border-radius: 5px;
    padding: 0;
    // background: rgba(255, 255, 255, 0.5);

    .none_icon {
        display: none;
    }

    div {
        .btn {
            display: inline-block;
            width: 32px;
            height: 32px;
            box-sizing: border-box;
            border-radius: 3px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 10px;
            background: #fff;
            transition: 0.1s;
            cursor: default;

            &:hover {
                background: rgba(168, 168, 168, 0.5);
            }

            i {
                transform: scale(1.5);
            }
        }

        // .placeholderBtn {
        //   display: inline-block;
        //   width: 35px;
        //   height: 35px;
        //   box-sizing: border-box;
        //   border-radius: 5px;
        //   display: flex;
        //   justify-content: center;
        //   align-items: center;
        //   margin-bottom: 10px;
        //   cursor: default;
        // }
    }
}

.el-popover {
    padding: 10px;

    .changeMap {
        display: flex;

        .toggleTool {
            border: 2px solid #dddddd;
            width: 100px;
            height: 100px;
            border: solid 4px rgb(255, 255, 255, 0);
            transition: 0.1s;
            box-sizing: padding-box;
            margin-right: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;

            &:hover {
                border: solid 4px rgb(255, 255, 255, 0.6);
            }

            img {
                height: 100px;
            }

            >div {
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 20px;
                background-color: grey;
                color: white;
            }
        }

        .toggleTool:nth-of-type(3) {
            margin-right: 0;
        }
    }

    .layerFilter {
        display: flex;
        flex-direction: column;

        .childrenList {
            display: flex;
            flex-direction: column;
            margin-bottom: 20px;
        }
    }
}
</style>
